<template>
    <div class="tabbar">
      <router-link
      tag="span"
      class="tabbar-body"
      v-for="link of links"
      :key="link.name" 
      :to="{name: link.name}"
      >    
      <span class="titile"  active>{{link.titile}}</span>
      </router-link>
      </div>
</template>

<script>
import routes from '@/router/routes'
export default {
  name:'Tabber',
  data () {
     return {
         links:routes.filter ( item => item.isNav === true )
     }
  },
  created() {
    console.log(routes)
  },
}
</script>

<style lang="less" scoped>
.tabbar{
     display: flex;
     height: 98px;
     width: 100%;
     border-top:1px solid #dededede ;
     background: #fff;
     &-body {
       flex:1;
       text-align: center;  
       color:#666666;
     .titile {
       line-height: 98px;
       font-size: 28px;
     }

     &.router-link-exact-active, 
     &.router-link-active{
       color:#a1363c;
     }
    } 
    .mint-badge{
          position: absolute;
    }
 }
</style>
